<template>
	<view id="pageIndex" style="background: #F8F7FC;">
		<!-- #ifdef H5 -->
		<view class="followMe" v-if="$wechat.isWeixin()">
			<view class="follow acea-row row-between-wrapper" v-if="followHid && followUrl && !subscribe">
				<view>点击“立即关注”即可关注公众号</view>
				<view class="acea-row row-middle">
					<view class="bnt" @click="followTap">立即关注</view>
					<span class="iconfont icon-guanbi" @click="closeFollow"></span>
				</view>
			</view>
			<view class="followCode" v-if="followCode">
				<view class="pictrue"><img :src="followUrl"/></view>
				<view class="mask" @click="closeFollowCode"></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="indexTip" :style="'top:' + (navH+50) + 'px'" :hidden="iShidden">
			<view class="tip acea-row row-between-wrapper">
				<view class="text">点击“<image src="../../static/images/spot.png"></image>”添加到我的小程序， 微信首页下拉即可访问商城。</view>
				<view class="iconfont icon-guanbi1" @click="closeTip"></view>
			</view>
		</view>
		<!-- #endif -->

		<headerSerch :dataConfig="headerSerch.default" @click.native="bindEdit('headerSerch','default')"></headerSerch>

		<swiperBg :dataConfig="swiperBg.default" @click.native="bindEdit('swiperBg','default')"></swiperBg>
		
		<menus :dataConfig="menus.default" @click.native="bindEdit('menus','default')"></menus>
		
		<view class="m-t-30 m-b-15    view flex-row align-center p-t-12 p-b-12 justify-between" style="background-color:#FFFFFF;width:calc(100vw - 60rpx);margin:0 auto;    margin-top: 40rpx;margin-bottom: 40rpx;border-radius: 10rpx;">
			<!-- <view class="fz-20 c_333 bold ">关于我们</view>
			<view @click="toNewInfo" class="fz-12" style="color:rgb(143, 143, 148);">
				<text class="fz-12">了解更多</text>
				<uni-icons size="12" type="arrowright" color="rgb(143, 143, 148)"></uni-icons>
			</view> -->
			<view class="view flex-row align-center" @click="toNewInfo">
				<view style="background-image:url(https://videocun.oss-cn-beijing.aliyuncs.com/4f19c202202231424061043.png);margin-left:30rpx;" class="bg-cover w128 h56 view align-center justify-center m-r-30 " >
					<view style="font-size:28rpx;color:#fff;">关于我们</view>
				</view>
				
				<view style="color:#666;">深圳稷赐生物科技公司介绍...</view>
			</view>
			
			<image style="width:20rpx;height:20rpx;padding-right:20rpx;" src="https://videocun.oss-cn-beijing.aliyuncs.com/7fa83202202231439454289.png"/>

		</view>
		
		<!-- <view class="p-l-15 p-r-15 view  " >
			<view style="border-radius:30rpx;height:360rpx;" class="p-t-30 p-b-30 p-l-15 p-r-15 top-banner1 bg-cover p-t-20 p-b-20" :style="{'background-image': `url(${banner1})`}">
				
				
			</view>
		</view> -->
		<!-- 产品服务 -->
		<view class="p-l-15 p-r-15">
			<view style="color:#333;font-size:32rpx;position: relative;padding-bottom: 20rpx;margin-bottom: 20rpx;">
				产品服务
				<image src="https://videocun.oss-cn-beijing.aliyuncs.com/2adde202202231452052474.png" style="width:66rpx;height:28rpx;position: absolute;bottom: -10rpx;left: 30rpx;"/>
			</view>
			<!-- <view class="fz-20 c_333 m-b-15 bold">产品服务</view> -->
			<view>
				<view class="view align-center justify-center  flex-row justify-between" v-for="(item,index) in goods" :key="index" @click="viewProduct(item.id)" style="box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);border-radius: 8px;width:calc(100vw - 64rpx);padding-left: 40rpx;padding-top: 32rpx;padding-bottom: 22rpx;padding-right: 32rpx;">
					<!-- <view class=" m-r-15 pro-box w-p-50" v-for="(item,index) in goods" :key="index" @click="viewProduct(item.id)">
						<image :src="item.image" class="width100 h130"/>
						<view class="width100 h60 text-center view align-center justify-center flex-1">{{ item.store_name }}</view>
					</view> -->
					<view style="margin-right:30rpx;">
						<view style="margin-bottom:28rpx;">
							<view style="color:#333;font-size:28rpx;margin-bottom:8rpx;margin-bottom:10rpx;">{{item.store_name}}</view>
							<view class="view flex-row align-center">
								<view style="font-size:24rpx;color:#666;">{{item.unit_name}}</view>
								<view class="view flex-row align-center">
									<view style="color:#FF2F2F;border:1px solid #FF2F2F;padding:2px;font-size:10rpx;margin-left:3px;border-radius:2px;" v-for="(item,index) in item.goods_cou" :key="index">
										赠 {{ item }} 红包券
									</view>
								</view>
							</view>
							
						</view>
						
						<view class="view flex-row align-center">
							<view style="color:#FF2F2F;margin-right:16rpx;font-size:32rpx;font-weight:bold;">￥</view>
							<view style="color:#999999;font-size:22rpx;"><text style="color:#FF2F2F;font-size:28rpx;">{{item.price}}</text>/盒</view>
							
							
						</view>
						
					</view>

					<view>
						<image :src="item.image" style="width:224rpx;height:180rpx;border-radius:5px;"/>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 案例管理 -->
		<!-- <view class="p-l-15 p-r-15 m-t-40">
			<view class="fz-20 c_333 m-b-15 bold">案例管理</view>
			<view class="view flex-row align-center justify-center m-b-15 flex-wrap">
				
				<view class=" m-r-15 pro-box w-p-50 m-b-30" v-for="(item,index) in artice" :key="index" @click="viewAn(item.id)">
					<image :src="item.image_input" class="width100 h130"/>
					<view class="width100 h60 text-center view align-center justify-center flex-1">{{ item.title }}</view>
				</view>

			</view>

			<view class="view flex-row align-center justify-center">
				<button plain class="blue-border w100 h40 fz-18 align-center view justify-center" @click="viewMore">显示全部</button>
			</view>
		</view> -->
		<tabBar :dataConfig="tabBar.default" :pagePath="'/pages/index/index'" @click.native="bindEdit('tabBar','default')"></tabBar>
		<view v-if="site_config && !isIframe" class="site-config" @click="goICP"></view> 
		<view class="uni-p-b-98" v-if="!isIframe"></view>
		<coupon-window :window='window' :couponImage='couponImage' :couponList='couponList' @onColse="onColse"></coupon-window>
		
	</view>
</template>

<script>
import headerSerch from './components/headerSerch';
import couponWindow from './components/couponWindow';
import swiperBg from './components/swiperBg';
import menus from './components/menus';
import tabBar from './components/tabBar';
import { getShare, follow } from '@/api/public.js';
// #ifdef MP
import { SUBSCRIBE_MESSAGE, TIPS_KEY } from '@/config/cache';
// #endif

import { mapGetters } from 'vuex';
import { getTemlIds,siteConfig,getDiy,
		getCoupons,
		getNewCoupon,
		pinkgetDiy, getIndexData, getCouponV2, getCouponNewUser } from '@/api/api.js';
// import { getGroomList } from '@/api/store.js';
import { toLogin } from '@/libs/login.js';
let app = getApp();
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
	computed: mapGetters(['isLogin', 'uid']),
	components: {
		couponWindow,
		headerSerch,
		swiperBg,
		menus,
		tabBar
	},
	data() {
		return {
			banner1: 'http://47.104.138.35/uploads/attach/2021/11/20211119/4aa33ae84bb387660ee2525569c6f8ce.jpg',
			followHid: true,
			followUrl:'',
			followCode:false,
			navH:statusBarHeight,
			couponList: [],
			subscribe: false,
			window: false,
			iShidden:false,
			couponImage: '',
			goodType: 3,
			loading: false,
			loadend: false,
			loadTitle: '下拉加载更多', //提示语
			page: 1,
			limit: this.$config.LIMIT,
			numConfig: 0,
			goods: [],
			artice: [],
			couponObj: {},
			isCouponShow: false,
			shareInfo: {},
			site_config:'',
			isIframe: app.globalData.isIframe,
			headerSerch:{},//头部搜索
			swiperBg:{},//轮播
			menus:{},//导航
			news:{},//消息公告
			activity:{},//活动魔方
			alive:{},//直播
			scrollBox:{},//快速选择分类
			titles:{},//标题
			goodList:{},//商品列表(商品列表、首发新品、热门榜单、促销单品、精品推荐)
			tabBar:{},//导航
			customerService:{},//客服
			picTxt:{},//图文详情
			bargain:{},//砍价
			combination:{},//拼团
			adsRecommend:{},//广告位
			seckill:{},//秒杀
			coupon:{},//红包券
			isBorader: ''
		};
	},
	
	onLoad(options) {
		let that = this;
		// #ifdef H5
		if(app.globalData.isIframe){
			setTimeout(()=>{
				let active;
				document.getElementById('pageIndex').children.forEach(dom=>{
					dom.addEventListener('click', (e)=>{
						e.stopPropagation();
						e.preventDefault();
						if(dom === active) return;
						dom.classList.add('borderShow');
						active && active.classList.remove('borderShow');
						active = dom;
					})
				})
			});
		}
		if (app.globalData.isIframe) {
			uni.hideTabBar();
		}
		this.getFollow();
		if (that.$wechat.isWeixin()) {
			that.$wechat.location().then(res=>{
				uni.setStorageSync('user_latitude', res.latitude);
				uni.setStorageSync('user_longitude', res.longitude);
			})
		}else{
		// #endif	
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch {}
				}
			});
			
		// #ifdef H5	
		}
		// #endif
		this.diyData();
		this.getIndexData();
		this.setOpenShare();
		// #ifdef MP
		if (this.$Cache.get(TIPS_KEY)) this.iShidden = true;
		this.getTemlIds();
		// #endif
	},
	// #ifdef MP
	//发送给朋友
	onShareAppMessage: function() {
		// 此处的distSource为分享者的部分信息，需要传递给其他人
		let that = this;
		return {
			title: this.shareInfo.title,
			path: '/pages/index/index',
			imageUrl: this.shareInfo.img
		};
	},
	//分享到朋友圈
	onShareTimeline: function() {
		return {
			title: this.shareInfo.title,
			imageUrl: this.shareInfo.img
		};
	},
	// #endif
	onShow() {
		siteConfig().then(res => {
			this.site_config = res.data.record_No
			
		}).catch(err => {
			console.error(err.msg);
		});
		this.newCoupon();
		if (!app.globalData.isIframe) {
			uni.showTabBar();
			if (this.isLogin) {
				// this.getCoupon();
			}
		}
	},
	methods: {
		getSt(val) {
			return parseInt(val)
		},
		newCoupon() {
			getNewCoupon().then(res => {
				
				let data = res.data;
				this.couponList = data.list;
				this.couponImage = data.image;
				setTimeout(() => {
					
					if (data.list.length) {
						this.window = true
						
					} else {
						this.window = false
					}
				}, 300)
			})
		},
		toNewInfo() {
			uni.navigateTo({
				 url: '/pages/news_details/index?id=1'
			});
		},
		// 查看案例
		viewProduct(id) {
			uni.navigateTo({
					url: "/pages/goods_details/index?id=" + id
			})
		},
		// 查看案例
		viewAn(id) {
			uni.navigateTo({
					url: "/pages/news_details/index?id=" + id
			})
		},
		viewMore() {
			uni.navigateTo({
					url: "/pages/news_list/index"
			})
		},
		bindEdit(name,dataName) {
			if (app.globalData.isIframe) {
				window.parent.postMessage(
					{
						name: name,
						dataName: dataName,
						params: {}
					},
					'*'
				);
				return;
			}
		},
		getFollow() {
		   follow().then(res => {
				this.followUrl = res.data.path;
		   }).catch((err) => {
				return this.$util.Tips({
				    title: err.msg
				});
		   });
		},
		followTap() {
			this.followCode = true;
			this.followHid = false;
		},
		closeFollow() {
			this.followHid = false;
		},
		onColse() {
				this.$set(this, "window", false);
			},
		closeFollowCode() {
			this.followCode = false;
			this.followHid = true;
		},
		closeTip: function() {
			this.$Cache.set(TIPS_KEY, true);
			this.iShidden = true;
		},
		// 红包券弹窗
		getCoupon() {
			const tagDate = uni.getStorageSync('tagDate') || '',
				nowDate = new Date().toLocaleDateString();
			if (tagDate === nowDate) {
				this.getNewCoupon();
			} else {
				getCouponV2().then(res => {
					const { data } = res;
					if (data.list.length) {
						this.isCouponShow = true;
						this.couponObj = data;
						uni.setStorageSync('tagDate', new Date().toLocaleDateString());
					} else {
						this.getNewCoupon();
					}
				});
			}
		},
		// 新用户红包券
		getNewCoupon() {
			const oldUser = uni.getStorageSync('oldUser') || 0;
			if (!oldUser) {
				getCouponNewUser().then(res => {
					const { data } = res;
					if (data.show) {
						if (data.list.length) {
							this.isCouponShow = true;
							this.couponObj = data;
							uni.setStorageSync('oldUser', 1);
						}
					} else {
						uni.setStorageSync('oldUser', 1);
					}
				});
			}
		},
		// 红包券弹窗关闭
		couponClose() {
			this.isCouponShow = false;
			if (!uni.getStorageSync('oldUser')) {
				this.getNewCoupon();
			}
		},
		// 授权关闭
		// authColse: function(e) {
		// 	this.isShowAuth = e;
		// },
		// #ifdef MP
		getTemlIds() {
			let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
			if (!messageTmplIds) {
				getTemlIds().then(res => {
					if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
				});
			}
		},
		// #endif
		goICP() {
			// #ifdef H5
			window.open('http://beian.miit.gov.cn/');
			// #endif
			// #ifdef MP
			uni.navigateTo({
				url: `/pages/annex/web_view/index?url=https://beian.miit.gov.cn/`
			});
			// #endif
		},
		onLoadFun() {},
		diyData() {
			let that = this;
			getDiy().then(res => {
				let data = res.data;
				that.headerSerch = data.headerSerch;
				that.swiperBg = data.swiperBg;
				that.menus = data.menus;
				
				that.news = data.news;
				that.activity = data.activity;
				that.alive = data.alive;
				that.scrollBox = data.scrollBox;
				that.titles = data.titles;
				that.goodList = data.goodList;
				that.tabBar = data.tabBar;
				that.customerService = data.customerService;
				that.picTxt = data.picTxt;
				that.bargain = data.bargain;
				that.combination = data.combination;
				that.adsRecommend = data.adsRecommend;
				that.seckill = data.seckill;
				that.coupon = data.coupon;
			});
		},
		getIndexData() {
			uni.showLoading({
				title: '加载中'
			});
			getIndexData().then(res => {
				uni.hideLoading();
				this.goods = res.data.info.goods
				this.artice = res.data.info.artice
				this.subscribe = res.data.subscribe;
				// #ifdef H5
				localStorage.setItem("itemName", res.data.site_name);
				// #endif
				uni.setNavigationBarTitle({
					title: res.data.site_name
				});
			});
		},
		// 微信分享；
		setOpenShare: function() {
			let that = this;
			getShare().then(res => {
				let data = res.data.data;
				this.shareInfo = data;
				// #ifdef H5
				let url = location.href;
				if (this.$store.state.app.uid) {
					url = url.indexOf('?') === -1 ? url + '?spread=' + this.$store.state.app.uid : url + '&spread=' + this.$store.state.app.uid;
				}
				if (that.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: url,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'], configAppMessage);
				}
				// #endif
			});
		}
	},
	onReachBottom: function() {
		// this.getGroomList();
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.m-r-30 {margin-right: 30rpx;}
.p-t-12 {padding-top: 12rpx;}
.p-b-12 {padding-bottom: 12rpx;}
.p-l-16 {padding-left: 16rpx;}
.p-r-16 {padding-right: 16rpx;}
.w-p-50 {width:calc((100% - 60rpx ) / 2)}
.pro-box {
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	border-radius: 10px;
	overflow: hidden;
}
.blue-border {
	border:1px solid #9cb9f8;
}
.w128 {width: 128rpx;}
.h56 {height: 56rpx;}
.swiperCon{
		margin: 20rpx 0!important;
		/* #ifdef MP */
		/deep/.swiperBg{
			margin: 20rpx 0!important;
		}
		/* #endif */
		/deep/.swiper{
			swiper,
			.swiper-item,
			image {
				height: 190rpx!important;
			}
		}
	}
	.site-config {
		margin: 40rpx 0;
		font-size: 24rpx;
		text-align: center;
		color: #666;

		&.fixed {
			position: fixed;
			bottom: 69px;
			left: 0;
			width: 100%;
		}
	}
/* #ifdef MP */
	.indexTip {
		position: fixed;
		right: 42rpx;
		z-index: 1000;

		.tip {
			width: 400rpx;
			border-radius: 6rpx;
			background-color: #fff;
			padding: 15rpx 22rpx;
			position: relative;

			&::before {
				content: "";
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 17rpx solid #fff;
				position: absolute;
				top: -14rpx;
				right: 95rpx;
			}
		}

		.text {
			font-size: 22rpx;
			color: #333;
			width: 320rpx;

			image {
				width: 30rpx;
				height: 16rpx;
				display: inline-block;
			}
		}

		.iconfont {
			color: #cdcdcd;
			font-size: 32rpx;
		}
	}

	/* #endif */
/* #ifdef H5 */
        .follow {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.36);
			height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			padding: 0 30rpx;
			z-index: 100000;
			
			.iconfont {
				font-size: 30rpx;
				margin-left: 29rpx;
			}

			.bnt {
				width: 160rpx;
				height: 50rpx;
				background-color: #c3a575;
				border-radius: 25rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
			}
		}

		.followCode {
			.mask{
				z-index: 10000;
			}
			.pictrue {
				width: 500rpx;
				height: 720rpx;
				border-radius: 12px;
				left: 50%;
				top: 50%;
				margin-left: -250rpx;
				margin-top: -360rpx;
				position: fixed;
				z-index: 10001;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
/* #endif */

</style>
